<template>
    <div class="app-container">
        <el-row class="mb-2">
            <el-col :span="3"></el-col>
            <el-col :span="15">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <span class="me-2" style="display: flex;align-items: center;">
                            <el-icon style="color: green;font-size: 18px;" class="me-2"><Platform /></el-icon>
                            <span>待律师取:33</span>
                        </span>
                    </el-col> 
                    <el-col :span="6">
                        <span class="me-2" style="display: flex;align-items: center;">
                            <el-icon style="color: blue;font-size: 18px;" class="me-2"><Platform /></el-icon>
                            <span>待管理员取:33</span>
                        </span>
                    </el-col>
                    <el-col :span="6">
                        <span class="me-2" style="display: flex;align-items: center;">
                            <el-icon style="color: grey;font-size: 18px;" class="me-2"><Platform /></el-icon>
                            <span>空闲:33</span>
                        </span>
                    </el-col>
                    <el-col :span="6">
                        <span class="me-2" style="display: flex;align-items: center;">
                            <el-icon style="color: red;font-size: 18px;" class="me-2"><Platform /></el-icon>
                            <span>停用:33</span>
                        </span>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="6"></el-col>
        </el-row>
        <el-row style="height: calc(100vh - 114px - 22px - 40px);background: #A6ACBC;padding: 10px;">
            <el-col :span="24" style="border: 1px solid white;height: 100%;">
                <el-container style="height: 100%">
                    <el-aside width="39%" style="display: flex;display: -webkit-flex;background: #A6ACBC;justify-content: space-around;">
                        <div style="width: 50%;">
                            <ul>
                                <li class="grey">
                                    <div class="num">01</div>
                                </li>
                                <li class="lawyerstate">
                                    <div class="num">02</div>
                                </li>
                                <li class="adminstate">
                                    <div class="num">03</div>
                                </li>
                                <li class="adminstate">
                                    <div class="num">04</div>
                                </li>
                                <li class="adminstate">
                                    <div class="num">05</div>
                                </li>
                                <li class="grey">
                                    <div class="num">06</div>
                                </li>
                                <li class="grey">
                                    <div class="num">07</div>
                                </li>
                                <li class="stopstate">
                                    <div class="num">08</div>
                                </li>
                                <li class="grey">
                                    <div class="num">09</div>
                                </li>
                                <li class="grey">
                                    <div class="num">10</div>
                                </li>
                            </ul>
                        </div>
                        <div style="width: 50%;">
                            <ul>
                                <li v-for="(item, index) in items" :key="index" :class="getClass(item.status)">
                                    <div class="num">{{ item.num }}</div>
                                </li>
                            </ul>
                        </div>
                    </el-aside>
                    <el-main>
                        <el-image src="/public/律师接待自助服务系统4.jpg" style="width: 100%;"></el-image>
                    </el-main>
                    <el-aside width="39%">

                    </el-aside>
                </el-container>
            </el-col>
        </el-row>
            
    </div>
</template>
<script setup>
const {proxy} = getCurrentInstance();
const items = ref([
        { num: '01', status: 'grey' },
        { num: '02', status: 'lawyerstate' },
        { num: '03', status: 'adminstate' },
        { num: '04', status: 'adminstate' },
        { num: '05', status: 'adminstate' },
        { num: '06', status: 'grey' },
        { num: '07', status: 'grey' },
        { num: '08', status: 'stopstate' },
        { num: '09', status: 'grey' },
        { num: '10', status: 'grey' }
      ])
onMounted(() => {

})

// 根据柜子状态返回对应的类名
const getClass = (status) => {
  return {
    'grey': 'grey',
    'lawyerstate': 'lawyerstate',
    'adminstate': 'adminstate',
    'stopstate': 'stopstate'
  }[status] || ''; // 默认返回空字符串
};
</script>
<style lang="scss" scoped>
.app-container {
    height: calc(100vh - 114px);
    padding-bottom: 20px;
}

aside{margin-bottom: 0;height:100%;padding:0}
aside ul{height: 100%;display: flex;display: -webkit-flex;flex-direction: column;justify-content: space-around;width:100%;
    padding-left: 0; padding:10px;margin:0;}
aside ul li{ margin:0; padding:10px; list-style:none;height: 9.1%;background: red;position: relative;}

aside ul li .num {
    position: absolute;
    right: 5px;
    top: 6px;
    padding: 3px 5px;
    background: black;
    color: white;
    font-size: 16px;
    line-height: 16px;
}
aside ul .grey {
    background: #EFEBE8;
}
aside ul .lawyerstate {
    background: green;
}
aside ul .adminstate {
    background: blue;
}
aside ul .stopstate {
    background: red;
}

.el-main{padding:5px;height:100%;overflow: hidden;display: flex;display: -webkit-flex;align-items: center;background: #F0EBE8;
border:5px solid #A6ACBC}
</style>